<template>
  <div>
    <div id="myChart" :style="{width: '100%', height: '600px'}"></div>
    <div>
    </div>
  </div>
</template>

<script>
  import 'echarts/map/js/china.js';
  let echarts = require('echarts/lib/echarts')
  require('echarts/lib/chart/map')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  export default {
    data() {
      return {
        mapData: []
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        const self = this;
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '客观化设备分布图',
            left: 'left'
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'horizontal',
            left: 'center',
            data: ["手法仪","腧穴仪"]
          },
          visualMap: {
            min: 0,
            max: 10,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],           // 文本，默认为数值文本
            calculable: true
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: {readOnly: false},
              restore: {},
              saveAsImage: {}
            }
          },
          series: []
        });
        self.$axios.get('/api/echart/equipment')
          .then(function (response) {
            self.mapData = response.data.data;
            let shoufayi = response.data.data.shoufayi;
            let shuxueyi = response.data.data.shuxueyi;
            let sfData = [];
            let sxData = [];
            for(var key in shoufayi){
              let obj = new Object();
              obj.name = key;
              obj.value = shoufayi[key];
              sfData.push(obj);
            }
            for(var key in shuxueyi){
              let obj = new Object();
              obj.name = key;
              obj.value = shuxueyi[key];
              sxData.push(obj);
            }
            // 填入数据
            myChart.setOption({
              series: [{
                name: '手法仪',
                type: 'map',
                mapType: 'china',
                roam: false,
                label: {
                  normal: {
                    show: true
                  },
                  emphasis: {
                    show: true
                  }
                },
                data:sfData
              },{
                name: '腧穴仪',
                type: 'map',
                mapType: 'china',
                roam: false,
                label: {
                  normal: {
                    show: true
                  },
                  emphasis: {
                    show: true
                  }
                },
                data:sxData
              }]
            });
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }
  }
</script>
